import React,{useState,useContext,createContext,useReducer} from 'react';
import './style.css';
import Tlhead from './components/head';
import Tlbody from './components/body';
import Tlfoot from './components/foot';

const ContextComponent = createContext({});



export default function TodoList() {

    

    function listReducer(state,action) {

        switch(action.type) {
            case 'ADD' :
                return [
                    ...state,
                    {
                        id:state.length ? state[state.length-1].id + 1 : 0,
                        value:action.value,
                        isDone:false
                    }
                ];
            case 'DELETE':
                
                return [

                ];
            case 'SWITCHDONE' :

                return [

                ];
            default :
                return state;
        }
    }
    const [state,dispatch] = useReducer(listReducer,[]);
    
    const data = {state,dispatch};

    console.log(state);

    return (
        <ContextComponent.Provider  value={data}>

            <div className="todolist">
                <h1 className="todolist_title">Todo List</h1>
                <Tlhead className="todolist_head"/>
                <Tlbody className="todolist_body"/>
                <Tlfoot className="todolist_foot"/>
            </div>

        </ContextComponent.Provider>
        
    )
}

export {
    ContextComponent
}